<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #f00;
            position: relative;
            margin: auto;
        }

        .a {
            width: 100px;
            height: 100px;
            background-color: #000;
            position: absolute;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="a"></div>
    </div>

    <script>
        // 拖拽
        //   鼠标按下
        //       鼠标移动(按下之后的移动)
        //       鼠标抬起(移除鼠标移动)

        // 1 在鼠标按下的时候   就要获取鼠标在盒子中的位置


        // bug  ---- 鼠标抬起事件需要清除


        // 第一次鼠标按下的时候，鼠标抬起事件会被绑定上，下一次的时候鼠标只要抬起这个事件就会被触发，所以需要在抬起事件结束以后清除这个事件




        var oBox = document.querySelector('.box');
        var oDiv = oBox.querySelector('.a');


        // 获取盒子的宽高需要时间 --- 性能
        var maxWidth = oBox.clientWidth - oDiv.offsetWidth;
        var maxHeight = oBox.clientHeight - oDiv.offsetHeight;


        // div鼠标按下
        oDiv.onmousedown = function (e) {
            e = e || event;
            // 得到鼠标在盒子中的位置
            var gapX = e.offsetX;
            var gapY = e.offsetY;
            // console.log('down');
            // 鼠标按下之后的移动事件
            document.onmousemove = function (e) {
                e = e || event;
                var x = e.x - gapX - oBox.offsetLeft;
                var y = e.y - gapY - oBox.offsetTop;
                // console.log('move');


                if (x > maxWidth) x = maxWidth
                if (y > maxHeight) y = maxHeight
                if (x < 0) x = 0;
                if (y < 0) y = 0;
                oDiv.style.left = x + 'px';
                oDiv.style.top = y + 'px';
            }

            // document.onmouseup = function () {
            //     // 移除move
            //     document.onmousemove = null;
            //     console.log(4);
            //     document.onmouseup = null;
            // }

            document.addEventListener('mouseup', function () {
                document.onmousemove = null;
                console.log(c);
            })
        }



        // 鼠标每次按下都要触发事件     不需要移除
        //    鼠标移动
        //    鼠标抬起

    </script>
</body>

</html>